<template>
  <div class="app-container">
    <div class="mainbox">
      <div class="filter-container">
        <el-form v-show="showSearch" ref="queryForm" :model="queryParams"
                 :inline="true" label-width="68px" @submit.native.prevent>
          <el-form-item label="渠道名称" prop="channelName">
            <el-input
              v-model.trim="queryParams.channelName"
              maxlength="30"
              placeholder="请输入内容"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <div>
          <div class="flex-1" />
          <div style="display:flex;">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
          </div>
        </div>
      </div>
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button
            v-permission="['WAYMANAGE_ADD_BUTTON']"
            type="primary"
            icon="el-icon-plus"
            @click="handleAdd"
          >新增</el-button>
          <div class="flex-1" />
          <dt-dialog-column v-model="isShowTable" :columns="showColumns" :table-ref="$refs.table"
                            @queryTable="getList" />
        </div>
        <el-table v-if="isShowTable" ref="table" v-loading="loading"
                  border highlight-current-row :header-cell-style="{ backgroundColor: '#f2f2f2'}"
                  :data="sysMessageChannelList" @selection-change="handleSelectionChange">
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="(index)=>(queryParams.pageNo - 1) * queryParams.pageSize + index + 1"
          />
          <el-table-column v-if="showColumns[0].show" key="channelName" label="渠道名称"
                           show-overflow-tooltip align="center" prop="channelName" />
          <el-table-column v-if="showColumns[1].show" key="channelCode" label="渠道编码"
                           show-overflow-tooltip align="center" prop="channelCode" />
          <el-table-column v-if="showColumns[2].show" key="channelType" label="渠道类型"
                           show-overflow-tooltip align="center" prop="channelType">
            <template slot-scope="scope">
              <dt-dict-tag :options="dict.type.channelType" :value="scope.row.channelType" />
            </template>
          </el-table-column>
          <el-table-column v-if="showColumns[3].show" key="channelSdk" label="SDK类名"
                           show-overflow-tooltip align="center" prop="channelSdk">
            <template slot-scope="scope">
              <span>{{ scope.row.channelSdk==1?'阿里短信':scope.row.channelSdk==2?'腾讯短信':scope.row.channelSdk==3?'阿里邮箱':scope.row.channelSdk==4?'Java邮箱':scope.row.channelSdk==5?'站内信':'' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="showColumns[4].show"
            key="statusFlag"
            prop="statusFlag"
            align="center"
            class-name="status-col"
            label="渠道状态"
          >
            <template slot-scope="{ row}">
              <el-switch
                :value="row.statusFlag"
                :active-value="'Y'"
                :inactive-value="'N'"
                @change="statusChange(row.statusFlag,row)"
              />
            </template>
          </el-table-column>
          <el-table-column v-if="showColumns[5].show" key="remark" label="备注"
                           show-overflow-tooltip align="center" prop="remark" />
          <el-table-column v-if="showColumns[6].show" key="updateTime" label="修改时间"
                           show-overflow-tooltip align="center" prop="updateTime"
                           width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="showColumns[7].show" key="realUpdateName" label="修改人"
                           show-overflow-tooltip align="center" prop="realUpdateName" />
          <el-table-column v-if="showColumns[8].show" key="createTime" label="创建时间"
                           show-overflow-tooltip align="center" prop="createTime"
                           width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="showColumns[9].show" key="realCreateName" label="创建人"
                           show-overflow-tooltip align="center" prop="realCreateName" />
          <el-table-column :key="Math.random()" label="操作" fixed="right"
                           align="center" class-name="small-padding fixed-width" width="198">
            <template slot-scope="scope">
              <el-button
                v-permission="['WAYMANAGE_UPDATE_BUTTON']"
                size="small"
                icon="el-icon-edit"
                @click="handleUpdate(scope.row)"
              >修改</el-button>
              <!-- <el-button
                size="small"
                @click="handleDetail(scope.row)"
              >查看</el-button> -->
              <el-button
                v-permission="['WAYMANAGE_DEL_BUTTON']"
                size="small"
                icon="el-icon-delete"
                :disabled="scope.row.statusFlag=='Y'||scope.row.channelCode=='noticeChannel'||scope.row.channelCode=='workflowChannel'||scope.row.channelCode=='timerChannel'"
                type="danger"
                @click="handleDelete(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <dt-pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNo"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
    <!-- 详情弹框 -->
    <dt-detail ref="dtDetailRef" :dt-detail-option="detailOption" />
    <way-manage-edit ref="wayManageEditRef" />
  </div>
</template>

<script>
import { sysMessageChannelPage, sysMessageChannelDel, updateStatus } from '@/framework/api/messageCenter/wayManage'
import wayManageEdit from './components/wayManageEdit.vue'

export default {
  name: 'Message',
  components: { wayManageEdit },
  dicts: ['channelType'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显隐表格
      isShowTable: true,
      // 选中数组
      ids: [],
      // 列显隐数组
      showColumns: [
        { prop: 'channelName', label: '渠道名称', show: true },
        { prop: 'channelCode', label: '渠道编码', show: true },
        { prop: 'channelType', label: '渠道类型', show: true },
        { prop: 'channelSdk', label: 'SDK类名', show: true },
        { prop: 'statusFlag', label: '渠道状态', show: true },
        { prop: 'remark', label: '备注', show: true },
        { prop: 'updateTime', label: '修改时间', show: true },
        { prop: 'realUpdateName', label: '修改人', show: true },
        { prop: 'createTime', label: '创建时间', show: true },
        { prop: 'realCreateName', label: '创建人', show: true }
      ],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      sysMessageChannelList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        channelName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    }
  },
  computed: {
    // 详情参数
    detailOption() {
      return {
        rows: [
          {
            label: '渠道名称',
            prop: 'channelName'

          },
          {
            label: '渠道编码',
            prop: 'channelCode'

          },
          {
            label: '渠道类型',
            prop: 'channelType'

          },
          {
            label: 'SDK类名',
            prop: 'channelSdk'

          },
          {
            label: '备注',
            prop: 'remark'

          },
          {
            label: '修改时间',
            prop: 'updateTime'

          },
          {
            label: '修改人',
            prop: 'realUpdateName'

          },
          {
            label: '创建时间',
            prop: 'createTime'

          },
          {
            label: '创建人',
            prop: 'realCreateName'

          },
          {
            label: '渠道状态',
            prop: 'statusFlag'

          }
        ],
        data: {}
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询message列表 */
    getList() {
      this.loading = true
      sysMessageChannelPage(this.queryParams).then(({ data: response }) => {
        this.sysMessageChannelList = response.rows
        this.total = response.totalRows
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        channelId: null,
        channelName: null,
        channelCode: null,
        channelType: null,
        remark: null,
        messageSendTime: null,
        businessId: null,
        businessType: null,
        readFlag: null,
        delFlag: null,
        createUser: null,
        createTime: null,
        updateUser: null,
        updateTime: null,
        tenantId: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.messageId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.$refs.wayManageEditRef.open('', 'add')
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$refs.wayManageEditRef.open(row, 'update')
    },
    handleDetail(row) {
      this.detailOption.data = row
      this.$refs.dtDetailRef.dialogVisible = true
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const { channelId } = row
      this.$dtModal.confirm(`是否确认删除渠道名称为"${row.channelName}"的数据项？`).then(() => {
        return sysMessageChannelDel(channelId)
      }).then(() => {
        this.getList()
        this.$dtModal.msgSuccess('删除成功')
      }).catch(() => {})
    },
    statusChange(statusFlag, row) {
      const flag = (statusFlag === 'N' ? 'Y' : 'N')
      const params = {
        statusFlag: flag,
        channelId: row.channelId
      }
      updateStatus(params).then(({ data: response }) => {
        this.getList()
        this.$dtModal.msgSuccess('更新成功')
      })
    }
  }
}
</script>
